<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item active" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="login.html" class="nav-item login-btn" @click="goToPage('login')">登录</a>
            </nav>
        </header>

        <main class="carousel">
            <div class="carousel-container">
                <div class="carousel-slides">
                    <div class="carousel-slide active">
                        <div class="slide-content">
                            <h2 class="subtitle">专业心理咨询平台</h2>
                            <h1 class="title">让每个人都能获得<br>专业的心理支持</h1>
                            <p class="description">一对一专业咨询，帮助您解决心理困扰，找回内心的平静</p>
                            <a href="therapist.html" class="cta-button">立即咨询</a>
                        </div>
                        <div class="slide-image">
                            <img src="images/slide1.jpg" alt="心理咨询">
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <div class="slide-content">
                            <h2 class="subtitle">专业团队保障</h2>
                            <h1 class="title">资深心理咨询师<br>全程陪伴守护</h1>
                            <p class="description">严格筛选的专业团队，为您提供优质的心理健康服务</p>
                            <a href="therapist.html" class="cta-button">立即咨询</a>
                        </div>
                        <div class="slide-image">
                            <img src="images/slide2.jpg" alt="专业团队">
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <div class="slide-content">
                            <h2 class="subtitle">便捷的服务体验</h2>
                            <h1 class="title">线上线下结合<br>灵活预约咨询</h1>
                            <p class="description">提供多样化的咨询方式，让心理健康服务触手可及</p>
                            <a href="therapist.html" class="cta-button">立即咨询</a>
                        </div>
                        <div class="slide-image">
                            <img src="images/slide3.jpg" alt="便捷服务">
                        </div>
                    </div>
                </div>
                <div class="carousel-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
                <button class="carousel-btn prev">❮</button>
                <button class="carousel-btn next">❯</button>
            </div>
        </main>

        <section class="stats">
            <div class="container">
                <div v-if="loading.stats" class="loading-overlay">
                    <div class="loading-spinner"></div>
                </div>
                <div v-if="error" class="error-message">{{ error }}</div>
                <div class="stats-grid">
                    <div class="stat-item" v-for="(stat, index) in stats" :key="index">
                        <div class="stat-number" :data-index="index">
                            {{ stat.current }}{{ stat.suffix }}
                        </div>
                        <div class="stat-label">{{ stat.label }}</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h2 class="section-title">我们的特色</h2>
                <div class="feature-grid">
                    <div class="feature-card" v-for="feature in features" :key="feature.title">
                        <div class="feature-icon">
                            <i :class="feature.icon"></i>
                        </div>
                        <h3>{{ feature.title }}</h3>
                        <p>{{ feature.description }}</p>
                        <div class="feature-hover-effect"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="about">
            <div class="container">
                <div class="about-content">
                    <div class="about-text">
                        <h2 class="section-title">关于我们</h2>
                        <p>迈浪心理致力于为个人和企业提供专业的心理健康服务。我们相信每个人都值得拥有健康的心理状态和美好的生活。</p>
                        <p>我们的团队由经验丰富的心理咨询师组成，他们不仅拥有专业的资质，更怀着真诚的心为每一位来访者提供帮助。</p>
                        <a href="about.html" class="about-btn">了解更多</a>
                    </div>
                    <div class="about-image">
                        <img src="about-img.jpg" alt="关于我们">
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script src="main.js"></script>
    <script src="carousel.js"></script>
</body>

</html>